<template>
  <van-tabs v-model:active="StatusActive" @click-tab="TabChange">
    <van-tab
      v-for="(item, index) in StatusList"
      :title="item.title"
      :name="item.value"
      :key="index"
    ></van-tab>
  </van-tabs>
  <!-- 订单列表 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="load"
    >
      <!-- 商品卡片 -->
      <van-card
        v-for="(item, key) in list"
        :title="item.info.products.name"
        :thumb="item.info.products.thumbs_text"
        :num="item.info.pronum"
        :tag="item.status_text"
        @click-thumb="toProductInfo(item.info.proid)"
        :key="key"
      >
        <template #title>
          <div class="title">订单号：{{ item.code }}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.info.attrs">
          <van-tag
            v-for="(attr, index) in item.info.attrs"
            :key="index"
            class="tag"
            type="primary"
            >{{ attr.value }}</van-tag
          >
        </template>
        <template #desc v-else>
          <van-tag class="tag" type="danger">无规格数据</van-tag>
        </template>

        <template #tags>
          <div class="price">下单时间：{{ item.createtime_text }}</div>
        </template>

        <template #price>
          <div class="price">订单总价：￥{{ item.amount }}</div>
        </template>

        <template #footer>
         
          <van-button type="danger" size="small" v-if="item.status == '1'" @click="OrderApplyPay(item.id)">申请退款</van-button>

          <!-- status = 2 -->
          <van-button type="success" size="small" v-if="item.status == '2'" @click="OrderConfirm(item.id)">确认收货</van-button>
          <van-button type="success" size="small" v-if="item.status == 3">立即评价</van-button>
          <van-button type="primary" size="small" v-if="item.status == '2'" >物流详情</van-button>
          <van-button type="danger" size="small" v-if="item.status == '2'" @click="OrderApplyPay(item.id)">退货退款</van-button>
          <!-- status = -3 -->
          <van-button type="success" size="small" v-if="item.status == '-2'" @click="ToBackAdd(item.id)">填写退货信息</van-button>
          <!-- 
            
            <van-button type="danger" size="small">申请退货</van-button>
            
            <van-button type="primary" size="small">退货详情</van-button> -->
            <van-button type="primary" size="small" @click="OrderInfo(item.id)">订单详情</van-button>
        </template>
      </van-card>
    </van-list>
  </van-pull-refresh>

  <!-- 退款的弹框 -->
  <van-popup v-model:show="ApplyShow" position="bottom">
    <van-form @submit="OrderApply">
      <van-field
        v-model="remark"
        name="remark"
        rows="2"
        autosize
        type="textarea"
        maxlength="120"
        placeholder="请输入退款原因"
        show-word-limit
        :rules="[{ required:true,message:'请填写退款原因' }]"
      />
      <van-button
        square
        block
        color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
        native-type="submit"
      >提交申请</van-button>
    </van-form>
  </van-popup>
</template>
<script setup>
import { onBeforeMount } from "vue";

const { proxy } = getCurrentInstance();

onBeforeMount(async () => {
  load();
});

//封装数据
let StatusList = ref([
  { title: "全部", value: "" },
  { title: "已支付", value: "1" },
  { title: "已发货", value: "2" },
  { title: "已收货", value: "3" },
  { title: "已完成", value: "4" },
  { title: "退货退款", value: "-1" },
]);

let StatusActive = ref("");

//下拉刷新的数据
let list = ref([]); //数据列表
let page = ref(1); //分页
let loading = ref(false); //加载状态
let finished = ref(false); //是否无更多数据
let refreshing = ref(false); //下拉刷新

//退款弹框
let ApplyShow = ref(false)
let remark = ref() //退款原因
let orderid = ref(0) //订单id

//标签切换事件
const TabChange = async ({ name }) => {
  refresh();
};

//加载
const load = async () => {
  if (refreshing.value) {
    refreshing.value = false;
    list.value = [];
  }

  //组装数据
  var params = {
    busid: proxy.$business.value.id,
    status: StatusActive.value,
    page: page.value,
  };
  // 发送请求
  var result = await proxy.$POST({
    url: "/order/index",
    params,
  });
  loading.value = false;
  refreshing.value = false;
  if (result.code == 0) {
    finished.value = true;
    return false;
  }

  result.data.list.map((item) => {
    if (item.info) {
      item.info.attrs = JSON.parse(item.info.attrs);
    }
  });
  list.value = list.value.concat(result.data.list);

  if (list.value.length >= result.data.count) {
    finished.value = true;
  }
  page.value++;
};

//下拉刷新
const refresh = () => {
  page.value = 1;
  refreshing.value = true;
  load();
};

//跳转订单详情
const OrderInfo = (orderid) => proxy.$router.push({ path: "/order/info", query: { orderid: orderid } });

//申请退款
const OrderApplyPay = (id)=>{
  ApplyShow.value = true
  orderid.value = id
}
//仅退款 / 退货退款
const OrderApply = async ()=>{
  //关闭弹框
  ApplyShow.value = false
  //组装数据
  var params = {
    orderid:orderid.value,
    busid: proxy.$business.value.id,
    remark:remark.value
  }
  //发送请求
  var result = await proxy.$POST({
    url:'/order/apply',
    params
  })

  if(result.code == 0){
    proxy.$fail(result.msg)
    return false
  }

  proxy.$success({
    message:result.msg,
    onClose:()=> refresh()
  })

  console.log(result)
  return false
}

//填写退货信息
const ToBackAdd = async (id)=>{
  proxy.$router.push({path:'/back/add',query:{orderid:id}})
}

//确认收货
const OrderConfirm = async (id) => 
  {
    proxy.$confirm({
      title: '收货提醒',
      message: '是否确认收货',
    }).then(async () => {
      var result = await proxy.$POST({
        url: '/order/confirm',
        params: {
          orderid: id,
          busid: proxy.$business.value.id
        }
      })

      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }else
      {
        proxy.$success({
          message: result.msg,
          onClose: () => refresh()
        })
        return false
      }

    }).catch(() => {})
  }
</script>

<style scoped>
:deep(.cart) {
  display: flex;
  width: 100%;
}
::v-deep .van-swipe-cell {
  width: 100%;
}
.delete-button {
  height: 100%;
}

.van-card {
  background-color: #fff;
}

.title {
  font-size: 14px;
  font-weight: bold;
}

.tag {
  margin-right: 5px;
}

.price {
  font-size: 14px;
  font-weight: bold;
}
</style>
